<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside class="aside-box" width="150px">
      <el-menu
        :default-active="activePath"
        class="aside"
        :unique-opened="true"
        :router="true"
        :collapse="false"
        background-color="#263238"
        text-color="rgba(163, 175, 183, .9)"
        active-text-color="#fff"
      >
        <el-submenu :index="item.id + ''" v-for="item in listData" :key="item.id">
          <template slot="title">{{item.title}}</template>
          <el-menu-item
            :index="item.path"
            v-for="item in item.children"
            :key="item.id"
          >{{item.title}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 主要内容 -->
    <el-main>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item,index) in pathName" :key="index">
            <router-link :to="item.path">{{item.meta.title}}</router-link>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          title: "商户",
          id: 1,
          children: [
            {
              title: "管理员列表",
              id: 1 - 1,
              path: "/administratorList"
            }
          ]
        },
        {
          title: "权限管理",
          id: 2,
          children: [
            {
              title: "待定",
              id: 2 - 1,
              path: "/undetermined"
            },
            {
              title: "待定",
              id: 2 - 2,
              path: "/undetermined"
            }
          ]
        },
        {
          title: "任务",
          id: 3,
          children: [
            {
              title: "自动化规则",
              id: 3 - 1,
              path: "/automation"
            },
            {
              title: "定时任务",
              id: 3 - 2,
              path: "/timedTask"
            }
          ]
        },
        {
          title: "应用",
          id: 4,
          children: [
            {
              title: "应用列表",
              id: 4 - 1,
              path: "/appLits"
            },
            {
              title: "模板消息",
              id: 4 - 2,
              path: "/templateMessage"
            }
          ]
        },
        {
          title: "微信用户",
          id: 5,
          children: [
            {
              title: "用户列表",
              id: 5 - 1,
              path: "/userList"
            }
          ]
        }
      ],
      activePath: "",
      pathName: []
    };
  },
  methods: {
    getActivePathIndex() {
      var path = window.location.hash.replace("#", "");
      this.activePath = path;
      if (path === "graphic") {
        this.activePath = "home";
      }
      
    }
  },
  mounted() {
    this.getActivePathIndex();
    this.pathName = this.$route.matched
  },
  watch: {
    $route(to, from) {
      var path = to.path
      this.activePath = path;
      this.pathName = to.matched
    }
  }
};
</script>

<style>
.el-container .aside-box .el-menu {
  width: 100%;
}
</style>
<style lang="less" scoped>
.el-menu-vertical-demo {
  min-width: 200px;
}
.crumbs {
  width: 100%;
  margin-bottom: 20px;
}
</style>